// 收费明细
<template>
    <div class="contractDetails">
        <div class="title">合同费用明细</div>
        <el-table
            :data="receivableFees"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="costMonth"
                :formatter="monthFommater"
                label="所属月份"
                width="180">
            </el-table-column>
            <el-table-column
                prop="chargeProjectName"
                label="收费项目"
                width="180">
            </el-table-column>
            <el-table-column
                prop="costPeriodStart"
                label="开始日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="costPeriodEnd"
                label="结束日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="payableDate"
                label="应付日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="payableMoney"
                label="应付金额"
                width="180">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {getGenerateFeeObj} from '@/views/wy-lessor/rentalSociety/api/contract.js'
    export default {
        name: 'contractDetails',
        data() {
            return {
                //合同明细数据
                receivableFees: [ ],
                //选中的合同明细项目
                multipleSelection: []
            }
        },

        mounted:function(){
            //this.preViewFee();
        },




        methods: {

            //加载费用信息
            preViewFee(contractId){
                
                //alert("费用预览");
                let lessorContractId=contractId;//this.$route.query.id;

                getGenerateFeeObj(lessorContractId)
                    .then(response=> {

                            //alert(response.data)
                            if (response.data.code == 0) {
                                this.receivableFees = response.data.data;
                            }
                            else {
                                this.$alert("加载费用服务端服务错误" + response.code);
                            }
                        }
                    )
            },

            monthFommater(row,column){
              return row.costMonth.toString().substr(0,7);
            },

            toggleSelection(rows) {
                if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
                } else {
                this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
        },
    }
</script>

<style lang="scss" scoped>
.contractDetails{
    .title{
        text-align: center;
        font-size: 20px;
        margin:40px 0 30px;
    }
    /deep/ .el-table{
        .el-table__header{
            border-color: #dee2e6;
        }
        thead th{
            background-color: #FAFAFA;
             color: #333;
        }
        td{
            padding: 10px 0;
        }
    }
}
</style>
